<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>公益项目DAO</title>

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.min.css" rel="stylesheet">


  <!-- Custom styles for this page -->
  <link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="css/service.css">

</head>

<body id="page-top">

  <!-- Page Wrapper -->
  <div id="wrapper">

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

      <!-- Main Content -->
      <div id="content">

        <!-- Topbar -->
        <nav class="navbar navbar-expand navbar-light bg-gradient-primary topbar mb-4 static-top shadow">


          <!-- Nav Item - Dashboard -->
          <a class="nav-link" href="service_list.html">
            <span style="width:70px;display:-moz-inline-box; display:inline-block;color: white;font-weight: bold;">首页</span>
          </a>

          <a class="nav-link" href="service_list.html">
            <span style="width:80px;display:-moz-inline-box; display:inline-block;color: white;font-weight: bold;">接取服务</span>
          </a>

          <a class="nav-link" href="donate.html">
            <span style="width:80px;display:-moz-inline-box; display:inline-block;color: white;font-weight: bold;">赠送志愿时</span>
          </a>

          <a class="nav-link" href="crowdfunding.html">
            <span style="width:80px;display:-moz-inline-box; display:inline-block;color: white;font-weight: bold;">公益DAO</span>
          </a>
          <a class="nav-link" href="buy.html">
            <span style="width:80px;display:-moz-inline-box; display:inline-block;color: white;font-weight: bold;">志愿时商城</span>
          </a>

          <a class="nav-link" href="new-service.html">
            <span style="width:80px;display:-moz-inline-box; display:inline-block;color: white;font-weight: bold;">发布服务</span>
          </a>

          <a class="nav-link" href="user.html">
            <span style="width:80px;display:-moz-inline-box; display:inline-block;color: white;font-weight: bold;">用户中心</span></a>

          <!-- Topbar Search -->
          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">

            <div class="input-group" style="float: left">
              <input type="text" class="form-control bg-light border-0 small" placeholder="请输入要搜索的服务" aria-label="Search" aria-describedby="basic-addon2">
              <div class="input-group-append" style="z-index: 0">
                <button class="btn btn-danger" type="button">
                  <i class="fas fa-search fa-sm"></i>
                </button>
              </div>
            </div>
          </form>

          <!-- Topbar Navbar -->
          <ul class="navbar-nav ml-auto">

            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
            <li class="nav-item dropdown no-arrow d-sm-none">
              <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-search fa-fw"></i>
              </a>
              <!-- Dropdown - Messages -->
              <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
                <form class="form-inline mr-auto w-100 navbar-search">
                  <div class="input-group">
                    <input type="text" class="form-control bg-light border-0 small" placeholder="请输入要搜索的服务" aria-label="Search" aria-describedby="basic-addon2">
                    <button class="btn btn-primary" type="button">
                      <i class="fas fa-search fa-sm"></i>
                    </button>
                    <!--                     <div class="input-group-append">

                                        </div> -->
                  </div>
                </form>
              </div>
            </li>



            <div class="topbar-divider d-none d-sm-block"></div>

            <!-- Nav Item - User Information -->
            <li class="nav-item dropdown no-arrow">
              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="mr-2 d-none d-lg-inline text-light small">唐焌景</span>
                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
              </a>
              <!-- Dropdown - User Information -->
              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#">
                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                  Profile
                </a>
                <a class="dropdown-item" href="#">
                  <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                  Settings
                </a>
                <a class="dropdown-item" href="#">
                  <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
                  Activity Log
                </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                  Logout
                </a>
              </div>
            </li>

          </ul>

        </nav>
        <!-- End of Topbar -->
        
        <!-- Begin Page Content -->
        <div class="container-fluid" >
          


          <!-- 公益项目众筹开始 -->
          <div class="row">
            <div class="col-lg-12">
                <!-- Basic Card Example -->
              <div class="card shadow mb-4" id="project_list">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">DAO合约项目列表</h6>
                </div>
                <div class="card-body card-light" style="border: solid #f8f9fc; 1px;" >
                    <div style="float: left">
                      <span class="text">项目名称：xxxxx</span>
                    <br>
                    <span class="text">预期筹集的志愿时：100.0&nbsp;|&nbsp;已筹集到的志愿时：39.0&nbsp;|&nbsp;截止日期：2020-10-30</span>
                    </div>
                    <div style="padding-top: 10px;float: right;">
                      <button class="btn btn-primary" type="submit" onclick="donate()">捐赠</button>
                    </div>
                </div>
               
              </div>
            </div>
          </div>
          <!-- 服务列表结束-->


           <div id="donate" style="border: 1px solid;width: 100%;margin: auto;height: 100%;position: fixed;left: 0px;top: 0px;background: rgb(0,0,0,0.6);overflow: auto;text-align: center;display: none;z-index: 100">
    <div style="background: white;width: 300px;margin: auto;margin-top: 50px;border-radius: 5px;">
      <div style="width: 100%;height: 100%;border-bottom: 1px solid #CCCCCC;margin-top: 40px">
        <!-- 框内内容 -->
        <div style="padding-top: 20px;" id="">
          <span class="text" style="width: 150px;font-weight: bold;">
            项目介绍</span>
        </div>
        <div style="padding-top: 20px;">
          <span class="text">
            俗话说“家有一老，如有一宝！”。
            社工多番走访与核查中了解到鹤龙街辖区内户籍长者高达1787人（≥60岁）。
            </span>
        </div>
        <div style="padding-top: 20px;">
          <span class="text">
            社区内其实有着不少长者，儿女不在身边，生活质量较差，他们对生活充满担忧，
            害怕自己哪天摔倒没人扶，或是突然离开人世没人知道......
            其实他们特别希望有人能来听听自己的声音，知道自己没有被社会遗忘！</span>
        </div>
        <div style="padding-top: 20px;" id="donate_detail">
          <span class="text">您当前有<text id="has">25</text>个志愿时</span>
        </div>
        <br>
        <div>
          <input type="text" name="donate_num" placeholder="请输入要捐赠的志愿时" id="donate_num">
        </div>
        <br>
      </div>
      <div style="height: 39px;">
        <div onclick="javascript:confrim_donate();" style="float: left;width: 49%;height: 39px;border-right: 1px solid #CCCCCC;line-height: 39px;font-size: 1rem;">捐赠</div>
        <div onclick="deldonate()" style="float: right;width: 50%;height: 39px;line-height: 39px;font-size: 1rem">取消</div>
      </div>
    </div>
  </div>

          <!-- 分页开始 -->
            <div class="row" style="z-index: 0;">
            <div class="col-sm-12 col-md-5">
              <div class="dataTables_info" id = "dataTables_info" role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div>
            </div>
            <div class="col-sm-12 col-md-7">
              <div class="dataTables_paginate paging_simple_numbers" id="dataTables_paginate">
                <ul class="pagination">
                  <li class="paginate_button page-item previous" id="dataTable_previous">
                    <a href="#" aria-controls="dataTable" data-dt-idx="0" tabindex="0" class="page-link">Previous</a>
                  </li>
                  <li class="pagination_button page-item active">
                    <a href="#" aria-controls="dataTable" data-dt-idx="1" tabindex="0" class="page-link">1</a>
                  </li>
                  <li class="pagination_button page-item ">
                    <a href="#" aria-controls="dataTable" data-dt-idx="2" tabindex="0" class="page-link">2</a>
                  </li>
                  <li class="pagination_button page-item ">
                    <a href="#" aria-controls="dataTable" data-dt-idx="3" tabindex="0" class="page-link">3</a>
                  </li>
                  <li class="pagination_button page-item ">
                    <a href="#" aria-controls="dataTable" data-dt-idx="4" tabindex="0" class="page-link">4</a>
                  </li>
                   <li class="pagination_button page-item ">
                    <a href="#" aria-controls="dataTable" data-dt-idx="5" tabindex="0" class="page-link">5</a>
                  </li>
                  <li class="pagination_button page-item ">
                    <a href="#" aria-controls="dataTable" data-dt-idx="6" tabindex="0" class="page-link">6</a>
                  </li>
                  <li class="pagination_button page-item next" id="dataTable_next">
                    <a href="#" aria-controls="dataTable" data-dt-idx="7" tabindex="0" class="page-link">Next</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 分页结束 -->


        </div>
        <!-- /.container-fluid -->

      </div>
      <!-- End of Main Content -->

      <!-- Footer -->
      <footer class="sticky-footer bg-white">
        <div class="container my-auto">
          <div class="copyright text-center my-auto">
            <span>Copyright &copy; Your Website 2020</span>
          </div>
        </div>
      </footer>
      <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

  </div>
  <!-- End of Page Wrapper -->

  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
  </a>

  <!-- Logout Modal-->
  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
          <a class="btn btn-primary" href="login.html">Logout</a>
        </div>
      </div>
    </div>
  </div>


  


  




  <!-- Bootstrap core JavaScript-->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Core plugin JavaScript-->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for all pages-->
  <script src="js/sb-admin-2.min.js"></script>
  <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script src="js/serviceList.js"></script>
  <script type="text/javascript" src="js/crowfunding.js"></script>

   <!-- Custom scripts for all pages-->

  <!-- Page level plugins -->
  <script src="vendor/datatables/jquery.dataTables.min.js"></script>
  <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>

  <!-- Page level custom scripts -->
  <script src="js/demo/datatables-demo.js"></script>

  <script th:inline="javascript">
    $(function() {
        load_crowfunding();


    });

    function load_crowfunding() {
      var value=[[${value}]];
      let projects = [{
        "name": "鹤龙街社区老人探访",
        "need": 300,
        "has": 80,
        "deadline": "2020-11-24"
      }, {
        "name": "老人院服务",
        "need": 300,
        "has": 49,
        "deadline": "2020-10-28"
      }, {
        "name": "马拉松志愿服务",
        "need": 6000,
        "has": 4521,
        "deadline": "2020-10-25"
      }, {
        "name": "山东支教",
        "need": 1000,
        "has": 390,
        "deadline": "2020-10-25"
      }, {
        "name": "湖北支教",
        "need": 100,
        "has": 39,
        "deadline": "2020-10-21"
      }, {
        "name": "西藏支教",
        "need": 100,
        "has": 39,
        "deadline": "2020-10-20"
      }, {
        "name": "西藏支教",
        "need": 100,
        "has": 39,
        "deadline": "2020-10-15"
      }, {
        "name": "西藏支教",
        "need": 100,
        "has": 39,
        "deadline": "2020-10-9"
      }];
      let project_list = $("#project_list");
      project_list.html('<div class="card-header py-3">'+
              '<h6 class="m-0 font-weight-bold text-primary">公益DAO合约项目列表</h6>'+
              '</div>');
      for(var i =  0; i < projects.length; i++) {
        project_list.append('<div class="card-body card-light" style="border: solid #f8f9fc; 1px;" >' +
                '<div style="float: left">'+
                '<span class="text">项目名称：' + projects[i]['name'] +'</span>'+
                '<br>'+
                '<span class="text">预期筹集的志愿时：' + projects[i]['need'] +'&nbsp;|&nbsp;已筹集到的志愿时：' + projects[i]['has'] +'&nbsp;|&nbsp;截止日期：' + projects[i]['deadline'] +'</span>'+
                '</div>'+
                '<div style="padding-top: 10px;float: right;">'+
                '<button class="btn btn-primary" type="submit" onclick="donate()">捐赠</button>'+
                '</div>'+
                '</div>');
      }
    }
  </script>

</body>

</html>
